<template>
  <el-table :data="tableData">
    <el-table-column prop="1" label="ORDER NUMBER USED"></el-table-column>
    <el-table-column prop="2" label="Order Number"></el-table-column>
    <el-table-column prop="3" label="Code"></el-table-column>
    <el-table-column prop="4" label="Colour"></el-table-column>
    <template v-for="column in processedColumns" :key="column.prop || column.label">
      <!-- 处理有子表头的列 -->
      <TableColumn v-if="column.children && column.children.length > 0" :column-header="column" />
      <!-- 处理普通列 -->
      <el-table-column v-else v-bind="column" />
    </template>
    <el-table-column prop="5" label="Total"></el-table-column>
    <el-table-column prop="6" label="FINISH%"></el-table-column>
    <el-table-column prop="6" label="SHIPPING DATE"></el-table-column>
    <el-table-column prop="6" label="OCD COMMENTS"></el-table-column>
    <el-table-column prop="6" label="Warehouse comments"></el-table-column>
    <el-table-column prop="6" label="Used line"></el-table-column>
    <el-table-column prop="6" label="Plan input finish date"></el-table-column>
  </el-table>
</template>

<script setup>
import TableColumn from '../components/TableColumn.vue';
import { ref } from 'vue';

// 处理原始表头数据为树形结构
const processHeaderData = (headerArray) => {
  if (!headerArray || headerArray.length === 0) return [];

  // 计算最大列数
  const maxCols = Math.max(...headerArray.map((row) => row.length));

  // 创建深度副本并补齐每行到最大列数
  const headers = headerArray.map((row) => {
    const newRow = [...row];
    while (newRow.length < maxCols) {
      newRow.push(''); // 用空字符串补齐
    }
    return newRow;
  });
  const result = [];

  // 从第一行开始构建树形结构
  for (let colIndex = 0; colIndex < headers[0].length; colIndex++) {
    // 计算跨列数（包括空字符串占位符）
    const item = {
      label: headers[0][colIndex] || '',
      prop: headers[0][colIndex] || `col_${colIndex}`,
      align: 'center',
      width:120,
      height:30,
    };

    // 构建子节点（无论是否为空）
    item.children = buildChildren(headers, 1, colIndex, 1, 1);

    // 根据是否有子节点调整rowspan
    if (item.children && item.children.length > 0) {
      item.rowspan = 1;
    } else {
      item.rowspan = headerArray.length;
      delete item.children;
    }
    result.push(item);
  }
  return result;
};

// 构建子节点的递归函数
const buildChildren = (headers, rowIndex, startCol, span, level) => {
  // 边界检查
  if (rowIndex >= headers.length) return [];

  const children = [];
  let colIndex = startCol;

  // 遍历当前行指定范围内的列
  while (colIndex < startCol + span && colIndex < headers[rowIndex].length) {
    // 计算当前节点的跨列数（包括空字符串占位符）
    let colspan = 1;
    while (colIndex + colspan < startCol + span && colIndex + colspan < headers[rowIndex].length && headers[rowIndex][colIndex + colspan] === '') {
      colspan++;
    }

    // 创建子节点，保留空字符串作为占位符
    const child = {
      label: headers[rowIndex][colIndex] || '',
      prop: headers[rowIndex][colIndex] || `col_${rowIndex}_${colIndex}`,
      align: 'center',
      width:120,
      height:30,
    };

    // 递归构建更深层的子节点
    if (rowIndex + 1 < headers.length) {
      const grandChildren = buildChildren(headers, rowIndex + 1, colIndex, colspan, level + 1);
      if (grandChildren.length > 0) {
        child.children = grandChildren;
      } else {
        // 如果没有更深层子节点，则占满剩余行数
        child.rowspan = headers.length - rowIndex;
      }
    } else {
      // 如果是最后一行，则rowspan为1
      child.rowspan = 1;
    }

    children.push(child);
    colIndex += colspan;
  }

  return children;
};

const tableHeaderArr = [
  ['2', '2-3', '5-6', '7-8', '9-10', '11-13', 'xs', 's', 'm', 'L', 'XL', '2XL', '3XL', '4XL', '5XL', '6XL'],
  ['Hi-Viz', '4/6 yrs', '', '7/9yrs', '', '10/13yrs', '8', '10', '12', '14', '16', '18', '20', '22', '24'],
  ['Trousers', '', '28', '30', '34', '36', '38', '40', '42', '44', '46', '48', '50', '52'],
];

const processedColumns = ref(processHeaderData(tableHeaderArr));

const tableData = ref([]);
</script>
